<template>
  <div>
    <div class="view_side">
      <div class="slide-right-container">
        <div class="relation_mdd text-left">相关目的地：
          <span style="">
            <a href="/travel-scenic-spot/mafengwo/13732.html"
               class="link _j_keyword_msas"
               data-kw="湖南"
              target="_blank">
              湖南
            </a>
            <a href="/travel-scenic-spot/mafengwo/21536.html"
               class="link _j_keyword_msasas"
               data-kw="中国"
               target="_blank">
              中国
            </a>
            </span>
        </div>

        <div class="its_others">
          <div class="mdd_info">
            <!--_j_mdd_sta为目的地点击统计，修改注意-->
            <a href="#" class="_j_mdd_stas" target="_blank" :title="sidewest.address">
              <img :src="sidewest.img" width="240px"/>
              <i></i>
              <strong class="text-left">{{ sidewest.address }}</strong>
            </a>
          </div>
        </div>

        <div class="pics_num clearfix text-left">
          有<strong>{{ sidewest.picnum }}</strong>张照片
          <a href="#"
               :title="sidewest.address"
               class="view_more _j_mdd_stas"
               target="_blank">
          </a>
        </div>
      </div>
      <div class="article_index">
        <a href="#" target="_blank">
          <dl>
            <dt>
              <img :src="sidewest.img2" alt="2020-05" :title="sidewest.date2"/>
              <i class="ai_ico" :title="sidewest.date2"></i>
              <div class="ai_date">
                <span><i class="t-fs"></i></span>
                <strong>{{ sidewest.date }}</strong>
              </div>
            </dt>
            <dd class="text-left">{{ sidewest.date2 }}</dd>
          </dl>
        </a>
      </div>

      <div class="mainmdd_rel_notes _j_topblock" id="_j_mainmdd_rel_gls">
        <div class="notes_gonglve" style="margin-bottom: 0">
          <div class="side_title text-left">相关攻略</div>
          <div class="block">
            <!--图片轮播-->
            <!--<span class="icon iconfont">&#xe613;</span>-->
            <el-carousel height="160px" width="240px">
              <el-carousel-item v-for="item in sidewest.items" :key="item.id">
                <a href="/gonglve/ziyouxing/259423.html.html"
                   class="link_j_keyword_icont"
                   target="_blank"
                   :title="item.title"
                   style="position: absolute; z-index: 100;">
                  <img class="_iconfont" :src="item.ico"/>
                  <span class="count_icotion">{{item.count}}</span>   <!--预览数-->
                </a>
                <img :src="item.img"/>
                <h3 class="text-left">{{ item.title }}</h3>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>

      <div id="bignav">
      <div class="_destination text-left" id="bigav">
        相关目的地：
        <a href="/travel-scenic-spot/mafengwo/17070.html"
        target="_blank" class="scenic_spot_bourn" style="color: #ff9417">
          常德
        </a>
        <div class="pics_bourn clearfix text-left">
          <a href="#"
             :title="sidewest.address"
             class="view_more _j_mdd_stas"
             target="_blank">
          </a>
        </div>
      </div>

      <!--相关游记-->
      <div class="mainmdd_rel_notes _j_topblock" style="margin-top: 20px">
        <div class="notes_gonglve" style="margin-bottom: 0">
          <div class="side_title text-left">相关游记</div>
          <div class="block">
            <!--图片轮播-->
            <el-carousel height="160px" width="240px">
              <el-carousel-item v-for="item in sidewest.items2" :key="item.id">
                <a href="/gonglve/ziyouxing/259423.html.html"
                   class="link_j_keyword_icont"
                   target="_blank"
                   :title="item.title"
                   style="position: absolute; z-index: 100;">
                  <img class="_iconfont" :src="item.ico"/>
                  <!--预览数-->
                  <span class="count_icotion">{{item.count}}</span>
                </a>
                <img :src="item.img"/>
                <h3 class="text-left">{{ item.title }}</h3>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>

      <div class="mainmdd_rel_catalogue _j_topblock" style="margin-top: 20px">
        <div class="side_title text-left">游记目录</div>

        <div class="text-left side_count" id="side_counts" style="position: relative; height: 219px;">
          <div id="_j_catalogList" style="position: relative; overflow-y: hidden; max-height: 279px;">
            <ul class="catalog_content">
              <li class="catalog_city" id="_j_paragraph_nav_0">
                <span class="catalog_num">01/</span>
                <a href="#catalog_line" title="默认段落">
                  默认段落
                </a>
              </li>
              <li class="catalog_city" id="_j_paragraph_nav_1">
                <span class="catalog_num">02/</span>
                <a href="#wo" title="流连忘返卡乐星球">
                  流连忘返卡乐星球
                </a>
              </li>

              <li class="catalog_city" id="_j_paragraph_nav_2">
                <span class="catalog_num">03/</span>
                <a title="诗情画意湖仙岛" href="#catalog_line1">
                  诗情画意湖仙岛
                </a>
              </li>
              <li class="catalog_city" id="_j_paragraph_nav_3">
                <span class="catalog_num">04/</span>
                <a title="游荡在河街和轻松时光" href="#catalog_line2">
                  游荡在河街和轻松时光
                </a>
              </li>
              <li class="catalog_city" id="_j_paragraph_nav_4">
                <span class="catalog_num">05/</span>
                <a role="button" tabindex="4" data-seq title="在司马楼，遇见刘禹锡(0)" class="catalog_line _j_cataloglink">
                  在司马楼，遇见刘禹锡
                </a>
              </li>
              <li class="catalog_city" id="_j_paragraph_nav_5">
                <span class="catalog_num">06/</span>
                <a role="button" tabindex="5" data-seq title="一秒穿越唐朝！大唐司马(0)" class="catalog_line _j_cataloglink">
                  一秒穿越唐朝！大唐司马
                </a>
              </li>
              <li class="catalog_city" id="_j_paragraph_nav_6">
                <span class="catalog_num">07/</span>
                <a role="button" tabindex="6" data-seq title="假装在德国，德国风情街走一遭(0)" class="catalog_line _j_cataloglink">
                  假装在德国，德国风情街走一遭
                </a>
              </li>
              <li class="catalog_city" id="_j_paragraph_nav_7">
                <span class="catalog_num">08/</span>
                <a role="button" tabindex="7" data-seq title="愈夜愈美丽的穿紫河夜游(0)" class="catalog_line _j_cataloglink">
                  愈夜愈美丽的穿紫河夜游
                </a>
              </li>
              <li class="catalog_city" id="_j_paragraph_nav_8">
                <span class="catalog_num">09/</span>
                <a role="button" tabindex="8" data-seq title="在郑太有机农场来一串葡萄吧(0)" class="catalog_line _j_cataloglink">
                  在郑太有机农场来一串葡萄吧
                </a>
              </li>
              <li class="catalog_city" id="_j_paragraph_nav_9">
                <span class="catalog_num">10/</span>
                <a role="button" tabindex="9" data-seq title="登高望远，太阳山森林公园(0)" class="catalog_line _j_cataloglink">
                  登高望远，太阳山森林公园
                </a>
              </li>
            </ul>
          </div>
          <!--<div class="scrollbar" style="height: 88.8167px; opacity: 0; display: block; top: 0px;"></div>-->
        </div>

      </div>
      </div>
    </div>
  </div>
</template>

<script>
  import "@/assets/css/font_2108395_fgilwt0ivs/iconfont.css";
export default {
  props: ["sidewest"],
  data() {
    return {};
  },
  mounted: function() {
    window.addEventListener("scroll", this.onscroll);
    this.niceScroll();
  },
  methods: {
    onscroll() {
      // 获取到id  //bigav
      var bignav = document.getElementById("bignav");
      var bigav = document.getElementById("bigav");
      if (
        document.documentElement.scrollTop > 1350 &&
        document.documentElement.scrollTop < 24020
      ) {
        // 页面高度大于275执行操作
        console.log(">");  //relative   //fixed
        bignav.style.position = "fixed";
        bignav.style.top = "-98px";   /*设置置顶高度*/
        bignav.style.right = "158px";
        bignav.style.width = "236px";
        bigav.style.display = "block";
      } else if (document.documentElement.scrollTop > 2600) {
        //console.log('123');
        //alert("")
        bignav.style.position = "relative";
        bignav.style.top = "0px";
      } else {
        console.log("<");
        bignav.style.position = "static";
        bigav.style.display = "none";
        bignav.style.marginTop = "60px";
        // 页面高度小于275执行操作
      }
    }
  }
};
</script>

<style scoped="scoped">
.el-carousel >>> .el-carousel__indicators--horizontal {
  width: 240px;
}
.el-carousel >>> .el-carousel__item h3 {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 15px;
  font-size: 16px;
  line-height: 20px;
  color: white;
  font-weight: bold;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.view_side .side_title {
  margin-bottom: 15px;
  font-size: 16px;
  line-height: 1;
  color: #6f6a66;
}
.mainmdd_rel_notes {
  overflow: hidden;
  margin-bottom: 16px;
}
.article_index dd {
  height: 48px;
  line-height: 50px;
  overflow: hidden;
  padding-left: 5px;
  font-size: 14px;
}
.article_index .ai_date strong {
  display: block;
  line-height: 28px;
  font-size: 14px;
}
.article_index .ai_date span i {
  display: inline-block;
  width: 40px;
  height: 11px;
  background: url(../../assets/introduction-images/notes-medal3.png) no-repeat -200px
    0;
  overflow: hidden;
  vertical-align: top;
  position: static;
  margin-top: 2px;
}
.article_index .ai_date span {
  display: block;
  background-color: #f27178;
  line-height: 15px;
  font-size: 9px;
  white-space: nowrap;
  border-bottom: 2px solid #2b2b2b;
  border-radius: 2px 2px 0 0;
}
.article_index .ai_date {
  position: absolute;
  right: 10px;
  bottom: -37px;
  width: 45px;
  height: 45px;
  border: 2px solid #2b2b2b;
  border-radius: 5px;
  background-color: #fff;
  text-align: center;
  color: #111;
}
.article_index dt i {
  position: absolute;
  left: 3px;
  top: -6px;
  width: 44px;
  height: 46px;
  background: url(../../assets/introduction-images/notes-medal3.png) -50px 0;
}

.article_index dt img {
  width: 100%;
}

.article_index dt {
  position: relative;
  height: 142px;
}

.article_index a {
  color: #666;
}
.article_index {
  padding: 4px 4px 0;
  border: 1px solid #d6d6d6;
  margin: 40px 0 22px;
  font-size: 14px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
}
/*相关目的地top1*/
.pics_num a {
  width: 20px;
  height: 20px;
  float: right;
  background: url(../../assets/introduction-images/nn_sprite_v22.png) -413px -257px
    no-repeat;
  margin-top: 5px;
}
.pics_num a:hover {
  background-position: -434px -257px;
}
.pics_num strong {
  font-size: 22px;
  font-family: Arial;
  margin: 0 3px;
  position: relative;
  top: 2px;
}

.pics_num {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 26px;
}

/*相关目的地top2*/
.pics_bourn a{
  width: 20px;
  height: 20px;
  float: right;
  background: url(../../assets/introduction-images/nn_sprite_v22.png) -413px -257px
  no-repeat;
  margin-top: -21px;
  position: relative;
  left: -8px;
}

.pics_bourn a:hover{
  background-position: -399px -257px;
}

.mdd_info strong {
  position: absolute;
  left: 10px;
  right: 10px;
  color: #fff;
  font-size: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 1;
  bottom: 12px;
  font-weight: normal;
}
.mdd_info i {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  background: url(../../assets/introduction-images/cover_bg.png) 0 bottom
    repeat-x;
}

/*背景*/
.mdd_info {
  width: 240px;
  position: relative;
  height: 160px;
  overflow: hidden;
}
.its_others {
  margin-bottom: 20px;
  font-size: 14px;
}
.relation_mdd {
  margin-bottom: 12px;
  font-size: 14px;
}

.relation_mdd a{
  color: #ff8a00;
}

.relation_mdd a:hover{
  text-decoration: underline;
  color: #ff8a00;
}
/* .slide-right-container {
    top: 0;
  position: sticky;
} */
.view_side {
  width: 240px;
  /* height:2500px; */
  /* height: 500px; */
  /* background-color: bisque; */
  float: right;
  position: relative;
  /*margin-left: 120px;*/
}

  ._iconfont{
    margin-left: 7px;
    padding-top:3px;
  }

  .link_j_keyword_icont{
    color: #FFFFFF;
  }

  .count_icotion{
    padding-left: 5px;
    position: relative;
    top: 3px;
  }

  ._destination{
    color: #666666;
    font-size: 17px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    background: #f6f6f6;
    border-radius: 5px;
    padding: 8px;
    margin-top: 50px;
  }

  ._destination a:hover{
    color: #ff9417;
    text-decoration: underline;
  }

  /*.scrollbar{*/
  /*  position: absolute;*/
  /*  right: -15px;*/
  /*  top: 0;*/
  /*  width: 5px;*/
  /*  height: 100px;*/
  /*  background-color: #d6d6d6;*/
  /*  border-radius: 10px;*/
  /*  cursor: pointer;*/
  /*}*/

/*设置滚动条*/
  #side_counts{
    /*padding: 0px;*/
    /*height: 220px;*/
    /*width: 300px;*/
    /*border: 1px solid #dedede;*/
    /*overflow: auto;*/
    /*margin-bottom:20px;*/
    line-height: 29px;
  }

  .catalog_city a{
    color: #9d9d9d;
  }

.catalog_city a:hover{
  color: #e6a23c;
  text-decoration: underline;
}
</style>
